import React, { useState, useEffect, CSSProperties } from 'react'
import { Swiper, Image, List, Card, Tag, Space, Button, InfiniteScroll } from 'antd-mobile'
import PageHeader from '../components/PageHeader'
import { getBannerList, getDoctorList } from '../utils/api'
import { useRouterHook } from '../utils/hooks'
import { wapper } from '../utils/hoc'
const baseUrl = import.meta.env.VITE_API_BASE_URL
const Home: React.FC = () => {
    const { navigate } = useRouterHook()
    // 页码
    const [page, setPage] = useState(1)
    const [size] = useState(10)

    // 是否还有更多数据
    const [hasMore, setHasMore] = useState(true)
    // 加载更多数据
    async function loadMore() {
        // 请求医生列表
        getDoctor()
    }
    const [bannerList, setBannerList] = useState<Array<BannerRowType>>([])
    const [doctorList, setDoctorList] = useState<DoctorRowType[]>([])
    const getDoctor = async () => {
        const { data } = await getDoctorList({ page, size })
        if (data.code === 200 && data.data.length > 0) {
            // setDoctorList(data.data)
            // setDoctorList(state=>state.concat(data.data)  )
            setDoctorList(state => [...state, ...data.data])
            // 更新页码
            setPage(page => page + 1)
        } else {
            // 没有更多数据了
            setHasMore(false)
        }
    }
    const getBanner = async () => {
        const { data } = await getBannerList()
        if (data.code === 200) {
            setBannerList(data.data)
        }
    }
    useEffect(() => {
        // 请求轮播图
        getBanner()
    }, [])
    const fontStyle: CSSProperties = { fontSize: 14 }
    return (
        <div>
            <PageHeader>
                <h3>首页-名医在线-2024</h3>
            </PageHeader>
            {/* 轮播图 */}
            <Swiper loop autoplay autoplayInterval={1500}>
                {bannerList.map(item => (
                    <Swiper.Item key={item.id}>
                        <Image src={baseUrl + item.img}></Image>
                    </Swiper.Item>
                ))}
            </Swiper>
            <List header={<h3>名医推荐</h3>}>
                {doctorList.map(item => (
                    <List.Item
                        key={item.id}
                        prefix={
                            <Image
                                src={baseUrl + item.avatar}
                                style={{ borderRadius: '50%' }}
                                fit='cover'
                                width={100}
                                height={100}
                            />
                        }
                    >
                        <Card title={item.name}>
                            <Space direction="vertical">
                                <div style={fontStyle}>
                                    职称: <Tag color='primary'>{item.title}</Tag>
                                </div>
                                <Space style={fontStyle}> 擅长领域:{item.tags.map((item, index) => (
                                    <Tag color='success' key={index}>{item}</Tag>
                                ))}</Space>
                                <div style={fontStyle}>
                                    所属医疗机构: {item.bus_title}
                                </div>
                                <div style={fontStyle}>
                                    毕业院校: {item.school}
                                </div>
                                <Space style={{ display: "flex", justifyContent: "flex-end" }}>
                                    <Button onClick={() => navigate(`/appointAdd`, { state: { doctorid: item.id } })} shape="rounded" size="mini" color="default">立即预约</Button>
                                    <Button onClick={() => navigate(`/doctor?id=${item.id}`)} shape="rounded" size="mini" color="success">医生主页</Button>
                                    <Button onClick={() => navigate(`/business/${item.bus_id}`)} shape="rounded" size="mini" color="primary">医疗机构主页</Button>
                                </Space>
                            </Space>
                        </Card>
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div >
    )
}
export default wapper(Home, { title: '首页', requireLogin: false })
